// 应用样式入口文件，导入外部样式文件
// 以 main.scss 作为应用样式统一入口，导入外部样式
@import "font.scss";
@import "theme.scss";
@import "reset.scss";
//@import "animate.scss";
@import "transition.scss";
@import "layouts.scss";

@import "animate.css";


/* 默认样式 */
:root {
  //font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  //line-height: 1.5;
  //font-weight: 400;
  //
  //color-scheme: light dark;
  //color: rgba(255, 255, 255, 0.87);
  //background-color: #242424;
  //
  //font-synthesis: none;
  //text-rendering: optimizeLegibility;
  //-webkit-font-smoothing: antialiased;
  //-moz-osx-font-smoothing: grayscale;
  //
  //border-radius: 10px;
  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

// @media 媒体查询是 CSS 中的一种条件性规则，用于根据不同的设备特性（如屏幕尺寸、分辨率、设备类型等）来应用不同的样式规则。
// 媒体查询允许你创建响应式设计，使得网页能够在不同设备和屏幕尺寸上呈现出最佳的视觉效果。
// prefers-color-scheme 是一种媒体特性，用于检测用户的操作系统或浏览器偏好设置的颜色方案。并根据用户的偏好切换到不同的主题。
// 所有的媒体查询都是自动生效的。媒体查询是根据特定的条件来决定是否应用其中的样式规则。一旦条件满足，媒体查询中的样式就会自动应用。

/* 浅色模式 */
@media (prefers-color-scheme: light) {
  //:root {
  //  color: #213547;
  //  background-color: #ffffff;
  //}
  //a:hover {
  //  color: #747bff;
  //}
  //button {
  //  background-color: #f9f9f9;
  //}
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  //:root {
  //  color: #ffffff;
  //  background-color: #213547;
  //}
  //a:hover {
  //  color: #b3b3ff;
  //}
  //button {
  //  background-color: #424242;
  //}
}


/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {

}

/* 当屏幕宽度大于1200px时 */
@media (min-width: 1200px) {

}